<template>
<div>
  <query-builder v-model="arr[0].filter" v-bind="opt"></query-builder>
  <bot-data v-model="arr[0].data"></bot-data>
  <query-builder v-model="arr[1].filter" v-bind="opt"></query-builder>
  <bot-data v-model="arr[1].data"></bot-data>
</div>
</template>

<script>
import queryBuilder from '@/components/query-builder'
import botData from "@/components/query-builder/botData";
export default {
  name: 'bot-query',
  components: {
    queryBuilder,
    botData
  },
  props: ['dataForm', 'opt'],
  watch: {
    arr: {
      deep: true,
      handler (val) {
        this.$emit('change', val)
      }
    }
  },
  data () {
    return{
      arr: [
        {
          filter: {
            condition: 'and',
            rules: [
              {
                label: '',
                field: '',
                type: '',
                operator: '',
                value: ''
              }
            ]
          },
          data: {
            team: '',
            peer_group: ''
          }
        },
        {
          filter: {
            condition: 'and',
            rules: [
              {
                label: '',
                field: '',
                type: '',
                operator: '',
                value: ''
              }
            ]
          },
          data: {
            team: '',
            peer_group: ''
          }
        }
      ],
    }
  },
  created () {
    if (this.dataForm && JSON.stringify(this.dataForm) !== '{}') {
      this.arr = this.dataForm
    }
  }
}
</script>

<style scoped>

</style>
